<template>
  <div class="biling-bill-base-container overviewManagement">
    <div class="MessagePanel">
      <div class="topButton">
        <div class="name">
          <p class="classNme">计费方案管理</p>
          <p class="smallClassName">BILLING SCHEME MANAGEMENT</P>
        </div>
      </div>
      <div class="data-record-view-container">
        <el-tabs type="border-card">
        </el-tabs>
        <div style="display: flex; ">
          <el-tabs tab-position="left" @tab-click="checkTabs" v-model="deviceType" class="dataTables">
            <el-tab-pane label="水表" name="1"/>
            <el-tab-pane label="电表" name="2"/>
            <el-tab-pane label="冷却塔" name="3"/>
            <el-tab-pane label="热量表" name="4"/>
            <el-tab-pane label="流量计" name="5"/>
            <el-tab-pane label="冷热表" name="6"/>
            <el-tab-pane label="阀门" name="7"/>
            <el-tab-pane label="水泵" name="8"/>
            <el-tab-pane label="温控仪" name="9"/>
            <el-tab-pane label="VAV温控仪" name="10"/>
            <el-tab-pane label="时间采样仪" name="11"/>
            <el-tab-pane label="制冷主机" name="12"/>
          </el-tabs>
          <div style="width: 100%;padding: 0px 20px;">
            <div class="buttom" style="text-align: end;">
              <el-button class="Btn" size="small" type="topSubButtom" @click="addCostPlan()">
                <svg-icon icon-class="add" class="buttonSvg"/>
                添加付费方案
              </el-button>
              <el-button class="Btn" size="small" type="topSubButtom" @click="delCostPlan()">
                <svg-icon icon-class="remove" class="buttonSvg"/>
                删除
              </el-button>
            </div>
            <billing-scheme-table ref="billing_scheme_table" @dataQuery="dataQuery"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {nextTick} from "vue";
import BillingSchemeTable from "@/views/charging/components/BillingSchemeTable.vue";
import _ from "underscore";

let component;
export default {
  name: "BillingSchemeManagement",
  components: {BillingSchemeTable},
  data() {
    return {
      deviceType: "1",
    }
  },
  methods: {
    async dataQuery() {
      let response = await component.$asyncPost("costPlan", {
        actionType: "costPlanQuery",
        deviceType: component.deviceType
      });
      if (response.success) {
        component.$refs.billing_scheme_table.tableData=response.dataList;
    /*    let costPlanIdObj = _.groupBy(component.deviceList, "costPlanId")
        console.log(costPlanIdObj);
        if (Object.keys(costPlanIdObj).length === 1) {
          for (const costPlanId in costPlanIdObj) {
            let selectCostPlan = _.find(component.tableData, function (data) {
              return data.costPlanId === costPlanId
            })
          /!*  component.setCurrent(selectCostPlan);*!/
            console.log(selectCostPlan);
          }
        }*/
      }
    },
    addCostPlan() {
      component.$refs.billing_scheme_table.addConstPlan(component.deviceType);
    },
    delCostPlan() {

    },
    async checkTabs(tab, event) {//两个tabs的触发事件
      await nextTick();//等待DOM刷新完成 否则的话dataViewName 无法及时更新bigLabel和smallLabel
      this.dataQuery();
    },
  },
  mounted() {
    component = this;
    component.dataQuery();
  }
}
</script>

<style lang="scss">
.biling-bill-base-container {
  padding: 80px 60px 10px 60px;

  .el-date-editor {
    padding: 0px 15px;
  }

  .base-toolbar {
    background-color: #505f765c;

    .base-toolbar-title {
      line-height: 60px;
      background: linear-gradient(to right, #1572ff, #5248a0);
      -webkit-background-clip: text;
      color: transparent;
      margin-left: 20px;
      font-weight: bold;
      font-size: 20px;
    }
  }
}

.data-record-view-container {
  padding-top: 20px;
}
</style>